<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>天天生鲜-购物车</title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/reset.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/main.css}">
</head>
<body>
<div th:replace="top::top"></div>

<div class="total_count">全部商品<em>2</em>种</div>
<ul class="cart_list_th clearfix">
    <li class="col01">商品名称</li>
    <li class="col02">商品单位</li>
    <li class="col03">商品价格</li>
    <li class="col04">数量</li>
    <li class="col05">小计</li>
    <li class="col06">操作</li>
</ul>
<th:block th:each="cartVO:${list}">
    <ul th:id="${cartVO.id}" class="cart_list_td clearfix">
        <li class="col01">
            <th:block th:if="${cartVO.checked==1}">
                <input th:id="|checkbox${cartVO.id}|" name="selectCheckbox"
                       th:onclick="|updateChecked(${cartVO.id}, this.checked)|" type="checkbox" checked/>
            </th:block>
            <th:block th:if="${cartVO.checked==0}">
                <input th:id="|checkbox${cartVO.id}|" name="selectCheckbox"
                       th:onclick="|updateChecked(${cartVO.id}, this.checked)|" type="checkbox" />
            </th:block>
        </li>
        <li class="col02"><img th:src="${cartVO.MainImageFullUrl}"></li>
        <li class="col03" th:text="${cartVO.productName}"><br><em>25.80元/1台</em></li>
        <li class="col04">1台</li>
        <li th:id="|productPrice${cartVO.id}|" class="col05"  th:text="${cartVO.productPrice}"></li>
        <li class="col06">
            <div class="num_add">
                <a th:onclick="|updateQuantity(${cartVO.id}, 1)|" href="javascript:;" class="add fl">+</a>
                <input th:id="|quantityId${cartVO.id}|" type="text" class="num_show fl" th:value="${cartVO.quantity}">
                <a th:onclick="|updateQuantity(${cartVO.id}, -1)|" href="javascript:;" class="minus fl">-</a>
            </div>
        </li>
        <li th:id="|cartItemTotalPrice${cartVO.id}|" class="col07" th:text="|${cartVO.productPrice*cartVO.quantity}元|"></li>
        <li class="col08"><a th:onclick="'deleteById('+${cartVO.id}+')'" href="javascript:;">删除</a></li>
    </ul>
</th:block>


<ul class="settlements">
    <li class="col01"><input onclick="checkAll()" id="checkAll" type="checkbox" name=""></li>
    <li class="col02">全选</li>
    <li class="col03">合计(不含运费)：<span>¥</span><em id="totalPrice"></em><br>共计<b id="checkedTotalCount"></b>种商品</li>
    <li class="col04"><a href="/order/getOrderConfirmPage">去结算</a></li>
</ul>

<div class="footer">
    <div class="foot_link">
        <a href="#">关于我们</a>
        <span>|</span>
        <a href="#">联系我们</a>
        <span>|</span>
        <a href="#">招聘人才</a>
        <span>|</span>
        <a href="#">友情链接</a>
    </div>
    <p>CopyRight © 2023 Qing天天生鲜信息技术有限公司 All Rights Reserved</p>
    <p>电话：17658159724    鲁ICP备23030588888号</p>
</div>

<script type="text/javascript" th:src="@{/js/jquery-2.1.4.js}"></script>
<script type="text/javascript" th:src="@{/js/layer/layer.js}"></script>
<script type="text/javascript" th:src="@{/js/mylayer.js}"></script>
<script>
    $(function() {
        refreshTotalPrice();
    });

    function refreshTotalPrice() {
        var selectCheckboxs = $('input[name=selectCheckbox]:checked');
        $('#checkedTotalCount').text(selectCheckboxs.length);
        var totalPrice = 0;
        $(selectCheckboxs).each(function() {
            //this dom对象
            //checkbox111            checkbox222
            //cartItemTotalPrice111  cartItemTotalPrice222
            var checkboxId = this.id;
            var cartId = checkboxId.substr('checkbox'.length);//111
            var str = $('#cartItemTotalPrice' + cartId).text();//1892839元
            var cartItemTotalPrice = str.substr(0, str.length - 1);
            console.log(cartItemTotalPrice);
            totalPrice += parseFloat(cartItemTotalPrice);
        });
        $('#totalPrice').text(totalPrice);

        var checkboxs = $('input[name=selectCheckbox]')
        if (selectCheckboxs.length == checkboxs.length) {
            $('#checkAll').prop('checked', true);
        } else {
            $('#checkAll').prop('checked', false);
        }
    }

    function checkAll() {
        $('#checkAll').is(':checked')?$('input[name=selectCheckbox]').prop('checked', true):$('input[name=selectCheckbox]').prop('checked', false);
        var checked = $('#checkAll').is(':checked') ? 1 : 0;
        $.post(
            '/cart/updateCheckedAll',
            {'checked': checked},
            function(jsonResult) {
                if (jsonResult.ok) {
                    mylayer.okMsg(jsonResult.msg);
                    refreshTotalPrice();
                } else {
                    mylayer.errorMsg(jsonResult.msg);
                }
            }
        );
    }

    function updateQuantity(cartId, quantity) {
        $.post(
            '/cart/updateQuantity',
            {'id': cartId, 'quantity': quantity},
            function(jsonResult) {
                console.log(jsonResult);
                var newQuantity = parseInt($('#quantityId'+cartId).val()) + quantity;
                $('#quantityId'+cartId).val(newQuantity);
                var productPrice = $('#productPrice' + cartId).text();
                //更新cartItemTotalPrice值
                $('#cartItemTotalPrice'+cartId).text(productPrice * newQuantity + '元');
                refreshTotalPrice();
            },
            'json'
        );
    }

    function updateChecked(cartId, checked) {
        console.log('cartId: ' + cartId);
        console.log('checked: ' + checked);
        $.post(
            '/cart/updateChecked',
            {'id': cartId, 'checked': checked ? 1 : 0},
            function(jsonResult) {
                if (jsonResult.ok) {
                    mylayer.okMsg(jsonResult.msg);
                    var selectCheckboxs = $('input[name=selectCheckbox]:checked')
                    var checkboxs = $('input[name=selectCheckbox]')
                    if (selectCheckboxs.length == checkboxs.length) {
                        $('#checkAll').prop('checked', true);
                    } else {
                        $('#checkAll').prop('checked', false);
                    }

                    refreshTotalPrice();
                } else {
                    mylayer.errorMsg(jsonResult.msg);
                }
            }
        );
    }

    function deleteById(id) {
        $.post(
            '/cart/deleteById',
            {'id': id},
            function(jsonResult) {
                if (jsonResult.ok) {
                    $('#'+id+'').remove();
                    mylayer.okMsg(jsonResult.msg);
                    refreshTotalPrice();
                } else {
                    mylayer.errorMsg(jsonResult.msg);
                }
            }
        );
    }
</script>

</body>
</html>